<template>
<div class="draw">
    <div class="draw-container">
        <div class="draw-left" :class="{is_menu: state.is_menu}">
            <div class="header">
                <div class="item"
                     v-for="item in state.menu"
                     :key="item"
                     :class="{active:item.active}"
                     @click="menu_click(item)"
                >
                    {{item.name}}
                </div>
            </div>
            <el-scrollbar class="body-scrollbar">
                <div class="body" v-if="state.draw_type === 'midjourney'">
                    <drawMidjourney
                        :data="state.form"
                        @update:data="handleUpdateData"
                    />
                </div>
                <div class="body" v-if="state.draw_type === 'yjai'">
                    <drawYjai
                        :data="state.form"
                        @update:data="handleUpdateData"
                    />
                </div>
            </el-scrollbar>
            <div>{{state.form.prompt}}</div>
            <div class="footer">
                <a-button type="primary" size="large" style="width: 100%" @click="onSubmit" :loading="state.loading">生成绘画</a-button>
            </div>
        </div>
        <div class="draw-main">
            <div class="header">
                <div class="top">
                    <div class="left-menu" @click="is_menu_mini_toggle">
                        <Icon name="iconfont icon-caidan2" size="24"/>
                    </div>
                    <div class="logo">
                        <img src="~/assets/web/images/ai.png" alt="专业绘画">
                    </div>
                    <router-link to="/users" class="user">
                        <Icon name="iconfont icon-jurassic_user" size="24"/>
                    </router-link>
                </div>
            </div>
            <div class="content">
                <div class="draw-result" v-loading="state.loading" element-loading-text="正在绘制中...">
                    <div class="draw-result-img">
                        <el-image v-if="state.draw.image" :src="state.draw.image" :alt="state.draw.image" class="image" fit="cover" :preview-src-list="[state.draw.image]" lazy />
                        <el-image v-else :src="noFound" class="image"/>
                    </div>
                    <div class="draw-result-text" v-if="state.draw_type === 'midjourney'">
                        <div class="draw_draw-result-item-action__LqDlB">
                            <el-button class="button"><span>U1</span></el-button>
                            <el-button class="button"><span>U2</span></el-button>
                            <el-button class="button"><span>U3</span></el-button>
                            <el-button class="button"><span>U4</span></el-button>
                        </div>
                        <div class="draw_draw-result-item-action__LqDlB" style="margin-top: 10px">
                            <el-button class="button"><span>V1</span></el-button>
                            <el-button class="button"><span>V2</span></el-button>
                            <el-button class="button"><span>V3</span></el-button>
                            <el-button class="button"><span>V4</span></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>我的作品（{{state.data.total}}）</span>
                        </div>
                    </template>
                    <div class="content">
                        <el-scrollbar>
                            <div v-for="item in state.data.data" :key="item.id" class="item">
                                <el-image
                                    vv-if="item.image"
                                    :src="fullUrl(item.image)"
                                    :preview-src-list="[fullUrl(item.image)]"
                                    fit="cover"
                                    class="image"
                                >
                                    <template #error>
                                        <div class="image-slot" @click="onGetImage(item)">
                                            <el-icon><el-icon-Picture /></el-icon>
                                            <span>加载中..</span>
                                        </div>
                                    </template>
                                </el-image>
                            </div>
                            <el-empty v-if="state.data.total===0" description="暂无数据" />
                        </el-scrollbar>
                        <div class="pagination">
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="Number(state.data.total)"
                                @current-change="onPagination"
                            />
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
        <div v-show="state.is_menu" class="overlay" @click="is_menu_mini_toggle"></div>
    </div>
</div>
</template>

<script setup lang="ts">
import '/@/assets/web/scss/chat/draw.scss'
import {inject, reactive, ref, watch} from "vue"
import { ElNotification } from "element-plus";
import { useUserInfo } from "/@/stores/userInfo"
import { submit_draw, get_image, get_list } from "/@/api/frontend/chat/draw"
import {fullUrl} from "/@/utils/common";
import noFound from '/@/assets/web/images/no-found.png'
import drawMidjourney from '/@/layouts/frontend/components/chat/draw/midjourney.vue'
import drawYjai from '/@/layouts/frontend/components/chat/draw/yjai.vue'
import Icon from "/@/components/icon/index.vue";

const state: {
    is_menu: boolean,
    loading: boolean,
    login_show: boolean,
    draw: any,
    draw_type: string,
    menu: any,
    form: any,
    data: any,
    draw_id: number,
    params: any,
} = reactive({
    is_menu: false,
    loading: false,
    login_show: inject('login_show', ref(false)),
    draw: {},
    draw_type: 'midjourney',
    menu: [
        { name: '专业绘画', type: 'midjourney', active: true },
        { name: '意间绘画', type: 'yjai', active: false },
        { name: '其他', type: 'other', active: false },
    ],
    form: {
        is_submit: false,
        prompt: '',
    },
    data: [],
    draw_id: 0,
    params: {
        page: 1,
        limit: 10,
    }
})
const userInfo = useUserInfo()
const handleUpdateData = (data: any) => {
    state.form = data
}
const get_image_list = (id: number) => {
    get_image({
        id: id
    }).then((res: any) => {
        if(res.code == 1 && res.data.is_draw == 1) {
            state.draw = res.data
            state.loading = false
            state.form.is_submit = false
        }
    })
}

// 获取图片列表
const get_list_data = (params: object) => {
    get_list(params).then((res: any) => {
        if(res.code == 1) {
            state.data = res.data
        }
    })
}
// 加载完成
get_list_data(state.params)

const onSubmit = () => {
    // 判断是否登录
    if(!userInfo.isLogin()) {
        state.login_show = !state.login_show
        return false;
    }

    // 内容不能为空
    if(!state.form.content) {
        ElNotification({
            message: '内容不能为空',
            type: 'warning',
            duration: 2000,
        })
        return false;
    }
    state.loading = true
    state.form.draw_type = state.draw_type

    // 判断是否为空
    if (state.form.params) {

        // 组合state.form.params
        let params = ''
        for (let key in state.form.params) {
            params += `--${key} ${state.form.params[key]} `
        }
        state.form.content = state.form.content + params
    }

    // return false;

    // 提交数据
    submit_draw(state.form).then((res: any) => {
        if(res.code == 1) {
            ElNotification({
                message: res.msg,
                type: 'success',
                duration: 2000,
            })
            state.draw_id = res.data.id
        }
    }).catch(() => {
        state.loading = false
    })
    //state.form.content = ''
    state.form.is_submit = true
}
const menu_click = (item: any) => {
    state.menu.forEach((value: any) => {
        value.active = false
    })
    state.draw_type = item.type
    item.active = true
}
const onPagination = (page: number) => {
    state.params.page = page
    get_list_data(state.params)
}

const onGetImage = (item: any) => {
    get_image({
        id: item.id
    }).then((res: any) => {
        if(res.code == 1) {
            item.image = res.data.image
        }
    })
}

const is_menu_mini_toggle = () => {
    state.is_menu = !state.is_menu
}

// 监听state.draw_id变化，获取生成图片
watch(() => state.draw_id, (value) => {
    if(value) {
        state.draw = {
            title: 'no-found',
            image: noFound
        }
        let timer = setInterval(() => {
            get_image_list(value)
            if(state.draw.title !== 'no-found') {
                clearInterval(timer)
            }
        }, 5000)
    }
})
</script>

<style scoped lang="scss">

</style>
